<template>
  <el-dialog :title="info.title" v-if="visible" :visible.sync="visible" center width="1260px" :before-close="handleCancel">
    <el-form ref="formDate" label-suffix=":" label-width="140px" :rules="rules" :model="form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="工程名称" prop="pro">
            <ProSelectObject v-model="form.pro" :id="form.pro_id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="施工班组" prop="team">
            <el-select v-model="form.team" size="small" style="width: 100%">
              <el-option
                v-for="item in teams"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="PO单号">
            <span v-if="form.pro && form.pro.no">{{ "PO"+form.pro.no }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工程地点" prop="addr">
            <el-input v-model="form.addr" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划开工时间" prop="plan_start_time">
            <el-date-picker
              v-model="form.plan_start_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="计划完工时间" prop="plan_complete_time">
            <el-date-picker
              v-model="form.plan_complete_time"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              size="small"
              clearable
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="班组负责人" prop="head_id">
            <StaffSelect v-model="form.head_id" placeholder="请选择班组负责人" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="填表人" prop="su_id">
            <el-input v-model="form.su_id" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="日期" prop="induction_time">
            <el-input v-model="form.card" size="small" clearable />
          </el-form-item>
        </el-col> -->
        <el-col :span="8">
          <el-form-item label="天气情况" prop="weather">
            <el-input v-model="form.weather" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="最低/最高气温" prop="temperature">
            <el-input v-model="form.temperature" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="13">
              <div :class="'f-label' + (rules.today_work ? ' f-label-verify' : '')">当日施工完成情况:</div>
              <el-button type="primary" size="mini" icon="el-icon-plus" circle class="fr mr20" @click="handleAddTodayMatters()"></el-button>
              <el-table class="search-table" :data="form.today_matters" border fit highlight-current-row style="width: 97%;">
                <el-table-column label="序号" align="center" width="56px">
                  <template slot-scope="{$index}">
                    {{ $index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="施工区域、内容及人员安排" width="235px">
                  <template slot-scope="{row}">
                    <el-input v-model="row.matter" size="small" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="预计完成进度" width="120px">
                  <template slot-scope="{row}">
                    <el-input v-model="row.estimated_progress" size="small" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="实际完成进度" width="120px">
                  <template slot-scope="{row}">
                    <el-input v-model="row.actual_progress" size="small" clearable />
                  </template>
                </el-table-column>
                <el-table-column v-if="info.type !== 'view'" fixed="right" label="操作" align="center" width="90px">
                  <template slot-scope="{row,$index}">
                    <el-button size="mini" type="danger" @click="handleDeleteTodayMatters(row,$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="10">
              <div :class="'f-label' + (rules.tomorrow_work ? ' f-label-verify' : '')">明日计划施工内容:</div>
              <el-button type="primary" size="mini" icon="el-icon-plus" circle class="fr" @click="handleAddTomorrowMatters()"></el-button>
              <el-table class="search-table" :data="form.tomorrow_matters" border fit highlight-current-row style="width: 100%;">
                <el-table-column label="序号" align="center" width="56px">
                  <template slot-scope="{$index}">
                    {{ $index + 1 }}
                  </template>
                </el-table-column>
                <el-table-column label="施工区域、内容及人员安排" width="235px">
                  <template slot-scope="{row}">
                    <el-input v-model="row.matter" size="small" clearable />
                  </template>
                </el-table-column>
                <el-table-column label="预计完成进度" width="120px">
                  <template slot-scope="{row}">
                    <el-input v-model="row.estimated_progress" size="small" clearable />
                  </template>
                </el-table-column>
                <el-table-column v-if="info.type !== 'view'" fixed="right" label="操作" align="center" width="90px">
                  <template slot-scope="{row,$index}">
                    <el-button size="mini" type="danger" @click="handleDeleteTomorrowMatters(row,$index)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="22" class="mt20">
          <el-form-item label="人员进场情况" prop="personnel_situation">
            <el-input type="textarea" :rows="4" v-model="form.personnel_situation" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="材料及机械设备情况" prop="device_material">
            <el-input type="textarea" :rows="4" v-model="form.device_material" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="未按安排完成的情况说明及补救措施" prop="measure">
            <el-input type="textarea" :rows="4" v-model="form.measure" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="质量及验收情况" prop="quality_acceptance">
            <el-input type="textarea" :rows="4" v-model="form.quality_acceptance" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="安全、文明情况" prop="safe_civilized">
            <el-input type="textarea" :rows="4" v-model="form.safe_civilized" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="需协调事项" prop="coordinate">
            <el-input type="textarea" :rows="4" v-model="form.coordinate" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="其它" prop="other">
            <el-input type="textarea" :rows="4" v-model="form.other" size="small" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="22">
          <el-form-item label="现场施工主要图片" prop="files">
            <UploadImgs v-model="form.files" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <div class="fr mt10">
            <el-button size="small" @click="handleCancel()">取 消</el-button>
            <el-button type="primary" size="small" @click="handleEdit()">保 存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { files } from '@/api/file/cos'
import { addDay, updDay, dayMatters } from '@/api/report/report'
import UploadImgs from '@/myComponents/UploadImgs'
import form from '@/utils/form'
import ProSelectObject from '@/myComponents/ProSelectObject'
import StaffSelect from '@/myComponents/StaffSelect'

export default {
  components: { UploadImgs, ProSelectObject, StaffSelect },
  extends: form,
  props: {
    reqAdd: {
      default: addDay,
      type: Function
    },
    reqUpd: {
      default: updDay,
      type: Function
    }
  },
  data() {
    return {
      today_matters:[],
      tomorrow_matters:[],
      teams: [{ key: '工程一组', value: '工程一组' }, { key: '工程二组', value: '工程二组' }, { key: '工程三组', value: '工程三组' }, { key: '工程四组', value: '工程四组' }
      , { key: '运营一组', value: '运营一组' }, { key: '运营二组', value: '运营二组' }, { key: '运营三组', value: '运营三组' }, { key: '运营四组', value: '运营四组' }, { key: '调试组', value: '调试组' }],
      rules: {
        pro: [{ required: true, trigger: 'blur', message: '项目名称不可为空' }],
        team: [{ required: true, trigger: 'blur', message: '施工班组不可为空' }],
        addr: [{ required: true, trigger: 'blur', message: '人员出勤及施工器械记录不可为空' }],
        plan_start_time: [{ required: true, trigger: 'blur', message: '今日完成工作不可为空' }],
        plan_complete_time: [{ required: true, trigger: 'blur', message: '未完成工作不可为空' }],
        head_id: [{ required: true, trigger: 'blur', message: '明日工作计划不可为空' }],
        weather: [{ required: true, trigger: 'blur', message: '需协调工作不可为空' }],
        temperature: [{ required: true, trigger: 'blur', message: '工程变更记录不可为空' }],
        personnel_situation: [{ required: true, trigger: 'blur', message: '缺失及改善不可为空' }],
        device_material: [{ required: true, trigger: 'blur', message: '材料及机械设备情况不可为空' }],
        files: [{ required: true, trigger: 'blur', message: '附件不可为空' }],
        today_work: [{ required: true, trigger: 'blur', message: '当日施工完成情况不可为空' }],
        tomorrow_work: [{ required: true, trigger: 'blur', message: '明日计划施工内容不可为空' }]
      }
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.form = this.info.edit
        this.$set(this.form, 'pro', {})
        this.$set(this.form, 'today_matters', [])
        this.$set(this.form, 'tomorrow_matters', [])
        this.$set(this.form, 'files', '[]')
        if(this.info.type === 'edit'){
          this.getFiles()
          this.getDayMatters()
        }
      }
    }
  },
  mounted() {
  },
  methods: {
    handleAddTodayMatters() {
      this.form.today_matters.push({})
    },
    handleDeleteTodayMatters(row, index) {
      this.form.today_matters.splice(index, 1)
    },
    handleAddTomorrowMatters() {
      this.form.tomorrow_matters.push({})
    },
    handleDeleteTomorrowMatters(row, index) {
      this.form.tomorrow_matters.splice(index, 1)
    },
    handleEditBefore() {
      this.form.pro_id = this.form.pro ? this.form.pro.no : ''

      let matters = []
      this.form.today_matters.forEach(e => {
        if(e.matter && e.matter !== '') {
          let j = {}
          j.matter = e.matter || ''
          j.estimated_progress = e.estimated_progress || ''
          j.actual_progress = e.actual_progress || ''
          j.type = '1'
          matters.push(j)
        }
      })
      this.form.tomorrow_matters.forEach(e => {
        if(e.matter && e.matter !== '') {
          let j = {}
          j.matter = e.matter || ''
          j.estimated_progress = e.estimated_progress || ''
          j.actual_progress = e.actual_progress || ''
          j.type = '2'
          matters.push(j)
        }
      })
      this.form.matters = JSON.stringify(matters)
    },
    getFiles() {
      files({e_id: this.form.id, db_type: 'logc_report_day_archives'}).then(response => {
        this.$set(this.form, 'files', JSON.stringify(response.list))
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    getDayMatters() {
      dayMatters({day_id: this.form.id}).then(response => {
        response.list.forEach(e => {
          if(e.type === 1) {
            this.form.today_matters.push(e)
          }else if(e.type === 2) {
            this.form.tomorrow_matters.push(e)
          }
        })
        // this.list = response.list
      }).catch(err => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>

<style>
.f-label{
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 700;
}
.f-label-verify:before {
    content: "*";
    color: #ff4949;
    margin-right: 4px;
}
</style>
